import React from 'react'
import {
    TreeSelect,
    message,
    Button,
} from 'antd';
import { getTreeListVideo, getVideoListVideo } from '../../../services/fetch';
const TreeNode = TreeSelect.TreeNode;

export default class LeftVideo extends React.PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            plateList: [],
            page:1,
            data: {
                list: []
            }
        }
    }

    componentDidMount() {
        getTreeListVideo().then((res) => {
            if (res.data.code == 200) {
                this.setState({
                    plateList: res.data.data
                })
            }
        })
    }

    treeOnChange = (data) => {
        this.setState({
            page:1,
            plate_id:data
        },()=>{
            this.getVideoData(data);
        })
    }


    getVideoData = ()=>{
        let obj = {
            index: this.state.page,
            plate_id:this.state.plate_id
        }
        getVideoListVideo(obj).then((res) => {
            if (res.data.code == 200) {
                this.setState({
                    data: res.data.data
                })
            }
        })
    }

    render() {
        return (
            <div>
                <TreeSelect
                    style={{ width: 300, margin: '10px' }}
                    dropdownStyle={{ maxHeight: 400 }}
                    dropdownMatchSelectWidth
                    placeholder="请选择分类"
                    allowClear
                    treeDefaultExpandAll
                    onChange={this.treeOnChange}
                >
                    {this.state.plateList.map((item) => {
                        let children = item.children ? item.children : [];
                        return (
                            <TreeNode disabled={children.length > 0 ? true : false} value={item.plate_id} title={item.plate_name} key={item.plate_id}>
                                {children.map((item2) => {
                                    return <TreeNode value={item2.plate_id} title={item2.plate_name} key={item2.plate_id} />
                                })}
                            </TreeNode>
                        )
                    })}
                </TreeSelect>
                {this.state.data.list.length > 0 ?
                    <div className="pushData">
                        {this.state.data.list.map((item) => {
                            return (
                                <div className="item" >
                                    <img className="i-img" src={item.thumbnail} />
                                    <div className="push-title">{item.title}</div>
                                    <div className="bg">
                                        <span>{item.create_time}</span>
                                    </div>
                                    <div className="action">
                                        <Button size="small" className="mr10" onClick={() => {
                                            console.log(item);
                                            let data = {};
                                            data.type = 1;
                                            data.video_type = item.type;
                                            data.information_title = item.title;
                                            data.information_img = item.video_img;
                                            data.video_src = item.video_src;
                                            data.thumbnail = item.video_img;
                                            data.mType = 'video';

                                            window.PubSub.publish('setFileFabu', data)
                                        }}>使用</Button>
                                    </div>
                                </div>
                            )
                        })}
                        <div>
                            <Button style={{ marginLeft: '10px' }} onClick={() => {
                                let { page } = this.state
                                if (page == 1) {
                                    message.error('已经是第一页');
                                    return;
                                }
                                page = page - 1;
                                this.setState({
                                    page
                                }, () => { this.getVideoData() })

                            }}>上一页</Button>
                            <Button style={{ marginLeft: '20px' }} onClick={() => {
                                let { page,data } = this.state
                                if (page == data.total_page) {
                                    message.error('已经是最后一页');
                                    return;
                                }
                                page = page + 1;
                                this.setState({
                                    page
                                }, () => { this.getVideoData() })
                            }}>下一页</Button>
                        </div>

                    </div>
                    : <div className="note"> 暂无数据</div>}
            </div>
        )
    }
}